<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
[#include "/includes/header.html" /]
<title>点步微助手 - 做生意，用微助手</title>
<!-- Flot -->
<script src="${webctx}/resources/assets/js/plugins/flot/jquery.flot.js"></script>
<script src="${webctx}/resources/assets/js/plugins/flot/jquery.flot.tooltip.min.js"></script>
<script src="${webctx}/resources/assets/js/plugins/flot/jquery.flot.spline.js"></script>
<script src="${webctx}/resources/assets/js/plugins/flot/jquery.flot.pie.js"></script>
<script src="${webctx}/resources/assets/js/plugins/flot/jquery.flot.symbol.js"></script>
<!-- Jvectormap -->
<script src="${webctx}/resources/assets/js/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
<script src="${webctx}/resources/assets/js/plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
<!-- Peity -->
<!-- <script src="${webctx}/resources/assets/js/plugins/peity/jquery.peity.min.js"></script> -->
<script type="text/javascript" src="${webctx}/resources/assets/js/plugins/easypiechart/jquery.easypiechart.js"></script>
<!-- <script src="${webctx}/resources/assets/js/plugins/sparkline/jquery.sparkline.min.js"></script> -->
</head>
<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
[#include "/includes/menus.html" /]
    <div class="wrapper wrapper-content">
        <div class="row">
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-success pull-right">当月</span>
                        <h5>收入</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">${totalIncome}</h1>
                        <!-- <div class="stat-percent font-bold text-success">98% <i class="fa fa-bolt"></i>
                        </div> -->
                        <small>总收入</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-info pull-right">全年</span>
                        <h5>订单</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">${orderNum}</h1>
                        <div class="stat-percent font-bold text-info">20% <i class="fa fa-level-up"></i>
                        </div>
                        <small>总订单数</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-primary pull-right">全部</span>
                        <h5>总会员数</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">${buyerCount}</h1>
                        <div class="stat-percent font-bold text-navy">44% <i class="fa fa-level-up"></i>
                        </div>
                        <small>会员</small>
                    </div>
                </div>
            </div>
            <div class="col-sm-3">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <span class="label label-danger pull-right">已上架商品数</span>
                        <h5>商品</h5>
                    </div>
                    <div class="ibox-content">
                        <h1 class="no-margins">${productCount}</h1>
                        <!-- <div class="stat-percent font-bold text-danger">38% <i class="fa fa-level-down"></i></div> -->
                        <small>商品数</small>
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title">
                        <h5>订单</h5>
                        <div class="pull-right">
                            <div class="btn-group">
                                <!-- <button type="button" class="btn btn-xs btn-white active">天</button> -->
                                <button type="button" class="btn btn-xs btn-white">月报</button>
                                <!-- <button type="button" class="btn btn-xs btn-white">年</button> -->
                            </div>
                        </div>
                    </div>
                    <div class="ibox-content">
                        <div class="row">
                            <div class="col-sm-9">
                                <div class="flot-chart">
                                    <div class="flot-chart-content" id="flot-dashboard-chart"></div>
                                </div>
                            </div>
                            <div class="col-sm-3">
                                <ul class="stat-list">
                                    <li>
                                        <h2 class="no-margins">${orderNum}</h2>
                                        <small>订单总数</small>
                                        <!-- <div class="stat-percent">48% <i class="fa fa-level-up text-navy"></i></div> -->
                                        <div class="progress progress-mini">
                                            <div style="width: 48%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <!-- <li>
                                        <h2 class="no-margins ">4,422</h2>
                                        <small>最近一个月订单</small>
                                        <div class="stat-percent">60% <i class="fa fa-level-down text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 60%;" class="progress-bar"></div>
                                        </div>
                                    </li>
                                    <li>
                                        <h2 class="no-margins ">9,180</h2>
                                        <small>最近一个月销售额</small>
                                        <div class="stat-percent">22% <i class="fa fa-bolt text-navy"></i>
                                        </div>
                                        <div class="progress progress-mini">
                                            <div style="width: 22%;" class="progress-bar"></div>
                                        </div>
                                    </li> -->
                                  </ul>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
    [#include "/includes/footer.html" /]
<script type="text/javascript">
function gd(year, month, day) {
        return new Date(year, month - 1, day).getTime();
}
    var searchdata = function(){
    	$.post(obz.ctx+"/chartData", {}, function(json) {
      		 var dataMap =json.data;
      		 var dataList1 = dataMap.data1;//已支付订单数
      		 var dataList2 = dataMap.data2;//总订单数
      			//if(dataList1.length>0 && dataList2.length>0){
      				$("#flot-dashboard-chart").empty();
      				var data1 = new Array();
      				var data2 = new Array();
      				for(var i=0;i<dataList1.length;i++){
      					var obj=[];
      					obj.push(gd(dataList1[i].year,dataList1[i].month,dataList1[i].day));
      					obj.push(dataList1[i].incomeNum);
      					data1.push(obj);
      				}
      				for(var i=0;i<dataList2.length;i++){
      					var obj=[];
      					obj.push(gd(dataList2[i].year,dataList2[i].month,dataList2[i].day));
      					obj.push(dataList2[i].incomeNum);
      					data2.push(obj);
      				}
      			    $('.chart').easyPieChart({
      			        barColor: '#f8ac59',
      			        //                scaleColor: false,
      			        scaleLength: 5,
      			        lineWidth: 4,
      			        size: 80
      			    });

      			    $('.chart2').easyPieChart({
      			        barColor: '#1c84c6',
      			        //                scaleColor: false,
      			        scaleLength: 5,
      			        lineWidth: 4,
      			        size: 80
      			    });
      				 var dataset = [
      				              {
      				                  label: "总订单数",
      				                  data: data1,
      				                  color: "#1ab394",
      				                  bars: {
      				                      show: true,
      				                      align: "center",
      				                      barWidth: 24 * 60 * 60 * 600,
      				                      lineWidth: 0
      				                  }

      				              }, {
      				                  label: "以付款数",
      				                  data: data2,
      				                  yaxis: 2,
      				                  color: "#464f88",
      				                  lines: {
      				                      lineWidth: 1,
      				                      show: true,
      				                      fill: true,
      				                      fillColor: {
      				                          colors: [{
      				                              opacity: 0.2
      				                          }, {
      				                              opacity: 0.2
      				                          }]
      				                      }
      				                  },
      				                  splines: {
      				                      show: false,
      				                      tension: 0.6,
      				                      lineWidth: 1,
      				                      fill: 0.1
      				                  },
      				              }
      				          ];


      				          var options = {
      				              xaxis: {
      				                  mode: "time",
      				                  tickSize: [3, "day"],
      				                  tickLength: 0,
      				                  axisLabel: "Date",
      				                  axisLabelUseCanvas: true,
      				                  axisLabelFontSizePixels: 12,
      				                  axisLabelFontFamily: 'Arial',
      				                  axisLabelPadding: 10,
      				                  color: "#838383"
      				              },
      				              yaxes: [{
      				                      position: "left",
      				                     // max: ,
      				                      color: "#838383",
      				                      axisLabelUseCanvas: true,
      				                      axisLabelFontSizePixels: 12,
      				                      axisLabelFontFamily: 'Arial',
      				                      axisLabelPadding: 3
      				              }, {
      				                      position: "right",
      				                      clolor: "#838383",
      				                      axisLabelUseCanvas: true,
      				                      axisLabelFontSizePixels: 12,
      				                      axisLabelFontFamily: ' Arial',
      				                      axisLabelPadding: 67
      				              }
      				              ],
      				              legend: {
      				                  noColumns: 1,
      				                  labelBoxBorderColor: "#000000",
      				                  position: "nw"
      				              },
      				              grid: {
      				                  hoverable: false,
      				                  borderWidth: 0,
      				                  color: '#838383'
      				              }
      				          };
      				        $.plot($("#flot-dashboard-chart"), dataset, options);
      			//}  			
      	    });	
    }
    
    $(document).ready(function () {
     	searchdata();
     });

	Template.init("#menu-home");
</script>
</body>
</html>	